<template>
    <div class="chataBox">
        <!-- 左侧导航 -->
        <div class="navigation">
            <SideNav ref="sideNav" :menuList="menuList">
                <template #aiAssistant>
                    <ChatList ref="aiChatList" :chatList="chatList"
                        @select="(sessionId) => { getAiAssistantChatHistoryList(sessionId) }" @addChat="addAiChat()">
                        <template #headerTitle>
                            <div class="title">
                                <span class="iconfont icon-likesprogramadvisor-zhinengguwen"></span>
                                <div class="titleText">AI小云老师</div>
                            </div>
                        </template>
                    </ChatList>
                </template>
                <template #message>
                    <ChatList :chatList="messageChatList" @select="(sessionId) => { getMessageChatList(sessionId) }" />
                </template>
                <template #friends>
                    <MenuList :menuList="studentLists" :fontSize="14" @itemClick="showUserInfo = true" />
                </template>
                <template #homework>
                </template>
            </SideNav>
        </div>
        <div class="views">
            <div v-if="thisView == View.AIHome" class="aiHome">
                <div class="titleText">
                    <span class="iconfont icon-likesprogramadvisor-zhinengguwen"></span>我是 AI小云，很高兴见到你！</div>
                <div class="subtitleText">我可以帮你推荐适合的课程、制定学习计划、写作各种创意内容，请把你的任务交给我吧~</div>
                <div class="button" @click="addAiChat()">
                    <span class="iconfont icon-likesprogramliaotian"></span>
                    <span>开启新对话</span>
                </div>
            </div>
            <div v-else-if="thisView == View.ChatHome">
                <!-- 聊天首页 -->
            </div>
            <ChatContainer ref="chatContainer" v-else-if="thisView == View.Chat || thisView == View.AIChat"
                :chatTitle="chatTitle" :chatHistoryList="chatHistoryList" :memberList="memberList"
                @sendMessage="(message) => { sendMessage(message) }" @deleteChat="deleteChat()"></ChatContainer>
            <div v-else-if="thisView == View.Friend" style="width: 100%; height: 100%;">
                <UserInfo v-if="showUserInfo"></UserInfo>
            </div>
            <div v-else-if="thisView == View.Homework">
                <HomeWorkList></HomeWorkList>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, ref } from 'vue';
import type { ChatMemberList } from '@/components/message/ChatContainer.vue';
import type { Chat } from '@/components/message/ChatList.vue';
import type { SideNavMenu } from '@/components/SideNav.vue';
import { ChatHistoryData, Permission } from './message/chatContainer/ChatHistory.vue';
import { ChatRoleTypes } from '@/assets/chatBubble/chatBubble';
import { userAvatar } from '@/types/Base64Image';
import { OllamaApi } from '@/api/Ollama';
import MarkdownIt from 'markdown-it';
import { defineAsyncComponent } from 'vue';
import UserInfo from '@/components/message/UserInfo.vue';
import { MenuListItem } from '@/types/MenuListItem';
import MenuList from '@/components/MenuList.vue';
import HomeWorkList from '@/components/message/HomeWorkList.vue';

export default defineComponent({
    name: 'chatBox',
    components: {
        ChatContainer: defineAsyncComponent(() => import('@/components/message/ChatContainer.vue')),
        ChatList: defineAsyncComponent(() => import('@/components/message/ChatList.vue')),
        SideNav: defineAsyncComponent(() => import('@/components/SideNav.vue'))
    }
});

const showUserInfo = ref(false);

// 界面
const View = {
    AIHome: 'AIHome', // AI首页
    ChatHome: 'ChatHome', // 聊天首页
    AIChat: 'AIChat', // 普通聊天
    Chat: 'Chat', // 普通聊天
    Friend: 'Friend', // 好友
    Homework: 'Homework', // 作业
};

</script>
<script setup lang="ts">
const chatList = ref<Chat[]>([]); // 聊天列表
const chatHistoryList = ref<ChatHistoryData[]>([]); // 聊天记录列表
const chatTitle = ref(''); // 聊天标题
const memberList = ref<ChatMemberList[]>([]); // 聊天成员列表
const thisView = ref(View.AIHome); // 当前界面
const thisChatSessionId = ref(''); // 当前聊天会话id
const chatContainer = ref(null); // 聊天面板
const aiChatList = ref(null); // AI聊天列表

const md = new MarkdownIt();

const sideNav = ref(null);

// 获取AI聊天记录列表
const getAiAssistantChatHistoryList = async (sessionId: string) => {
    thisChatSessionId.value = sessionId;
    let aiAssistantChatHistoryList = await OllamaApi.getChatHistory(sessionId);

    // 获取聊天标题
    let newChatTitle = aiAssistantChatHistoryList[0]?.chatTitle;
    // 获取最后一条聊天记录
    let lastChatHistory = aiAssistantChatHistoryList[aiAssistantChatHistoryList.length - 1];
    // 将这个标题写回chatList
    chatList.value.forEach((chat) => {
        if (chat.sessionId == sessionId) {
            chat.title = aiAssistantChatHistoryList[0]?.chatTitle; // 将这个标题写回chatList
            chat.time = lastChatHistory.time;
            try {
                let newContent = new DOMParser().parseFromString(md.render(lastChatHistory.content.replace(/<think>[\s\S]*?(?:<\/think>|$)/, '')), 'text/html')
                chat.content = newContent.body.textContent; // 将这个最新消息写回chatList
            } catch (error) { }
        }
    });
    // 移除第一个（第一个为聊天标题）
    aiAssistantChatHistoryList.shift();

    if (sessionId === thisChatSessionId.value) {
        // 设置聊天标题
        chatTitle.value = newChatTitle;
        // 设置聊天记录列表
        chatHistoryList.value = aiAssistantChatHistoryList;
        memberList.value = [];
        thisView.value = View.AIChat;
        nextTick(() => {
            chatContainer.value.resetPanel();
        });
    }
};

// 获取消息会话列表
const getMessageChatList = (sessionId: string) => {
    chatHistoryList.value = messageChatHistoryList.value;
    if (sessionId == '6') {
        for (const chatHistory of chatHistoryList.value) { chatHistory.bubbleName = 'saibopengke' }
    }
    else if (sessionId == '7') {
        for (const chatHistory of chatHistoryList.value) { chatHistory.bubbleName = 'qiaokeli' }
    }
    else {
        for (const chatHistory of chatHistoryList.value) { chatHistory.bubbleName = 'default' }
    }
    memberList.value = [
        {
            userId: 1,
            userName: 'AI',
            avatar: '',
            permission: Permission.Teachers
        }
    ];
    thisView.value = View.Chat;
};

// aiAssistant 点击事件 (进入Ai界面)
const aiAssistantClick = async () => {
    chatList.value = await OllamaApi.getChats(); // 获取会话列表
    if (thisView.value !== View.AIChat) {
        thisView.value = View.AIHome;
    }
}

const addAiChat = async () => {
    // 创建会话
    const session = await OllamaApi.createChat();
    console.log('创建会话响应:', session);
    // 获取会话id
    const sessionId = session.data.sessionId;
    if (sessionId) {
        // 获取会话id
        chatList.value.push({
            title: '',
            content: '',
            time: Date.now(),
            sessionId: sessionId,
        });
        aiChatList.value.selectChat({ sessionId });
    }
    return sessionId;
}

const deleteChat = () => {
    if (thisView.value === View.AIChat) {
        console.log("deleteAiChat:", thisChatSessionId.value);
        OllamaApi.deleteChat(thisChatSessionId.value).then((res) => {
            if (res) {
                chatList.value = chatList.value.filter((item) => item.sessionId !== thisChatSessionId.value);
                thisChatSessionId.value = null;
                thisView.value = View.AIHome;
            }
        });
    }
    else {
        console.log("当前暂不支持删除消息对话");
    }
}

// message 点击事件
const messageClick = () => {
    if (thisView.value !== View.Chat) {
        thisView.value = View.ChatHome;
    }
}
// friends 点击事件
const friendsClick = () => {
    thisView.value = View.Friend;
}
// homework 点击事件
const homeworkClick = () => {
    sideNav.value.fold();
    thisView.value = View.Homework;
}
// 定义左侧菜单列表
const menuList = ref<SideNavMenu[]>([
    { iconName: 'icon-likesprogramadvisor-zhinengguwen', titleText: 'AI小云', slotName: 'aiAssistant', onClick: aiAssistantClick },
    { iconName: 'icon-likesprogramliaotian', titleText: '聊天', slotName: 'message', newMessage: true, onClick: messageClick },
    { iconName: 'icon-likesprogramyonghu', titleText: '好友', slotName: 'friends', onClick: friendsClick },
    { iconName: 'icon-likesprogramzhishiku', titleText: '作业', slotName: 'homework', onClick: homeworkClick }
]);

const sendMessage = async (message: string) => {
    chatHistoryList.value.push({
        bubbleName: 'default',
        role: ChatRoleTypes.Self,
        content: message,
        time: Date.now(),
    });

    if (thisView.value == View.AIChat) {
        chatHistoryList.value.push({
            bubbleName: 'saibopengke',
            role: ChatRoleTypes.Others,
            userId: 'assistant',
            content: '',
            time: Date.now(),
        });
        // 发送消息给AI
        await OllamaApi.sendGeneralMessage({ message: message, sessionId: thisChatSessionId.value }, async (chunk) => {
            chatHistoryList.value[chatHistoryList.value.length - 1].content += chunk.message;
            await nextTick(); // 等待 Vue 更新 DOM
        }).then(async () => {
            await getAiAssistantChatHistoryList(thisChatSessionId.value); // 更新聊天记录列表
        });
    }
}

// 好友列表

    // 学生列表
    const studentLists = ref<MenuListItem[]>([
        {
            menuId: '1',
            name: '2023级软件工程1班',
            icon: '&#xe65c;',
            children: [
                {
            menuId: '1.1',
            name: '张三',
                    icon: 'https://q1.qlogo.cn/g?b=qq&nk=2832684504&s=640',
                    isAvatar: true,
                    avatarRight: false,  // 头像显示在左边
        },
        {
            menuId: '1.2',
            name: '李四',
                    icon: 'https://picsum.photos/30/30?timestamp=2',
                    isAvatar: true,
                    avatarRight: false,
        },
        {
            menuId: '1.3',
            name: '王五',
                    icon: 'https://picsum.photos/30/30?timestamp=3',
                    isAvatar: true,
                    avatarRight: false,
                }
            ]
        },
        {
            menuId: '2',
            name: '2023级软件工程2班',
            icon: '&#xe65c;',
            children: [
                {
                    menuId:' 2.1',
                    name: '赵六',
                    icon: 'https://picsum.photos/30/30?timestamp=4',
                    isAvatar: true,
                    avatarRight: false,
                },
                {
                    menuId: '2.2',
                    name: '钱七',
                    icon: 'https://picsum.photos/30/30?timestamp=5',
                    isAvatar: true,
                    avatarRight: false,
                },
                {
                    menuId: '2.3',
                    name: '孙八',
                    icon: 'https://picsum.photos/30/30?timestamp=6',
                    isAvatar: true,
                    avatarRight: false,
                }
            ]
        },
        {
            menuId: '3',
            name: '2023级软件工程3班',
            icon: '&#xe65c;',
            children: [
                {
                    menuId: '3.1',
                    name: '周九',
                    icon: 'https://picsum.photos/30/30?timestamp=7',
                    isAvatar: true,
                    avatarRight: false,
                },
                {
                    menuId: '3.2',
                    name: '吴十',
                    icon: 'https://picsum.photos/30/30?timestamp=8',
                    isAvatar: true,
                    avatarRight: false,
                },
                {
                    menuId: '3.3',
                    name: '郑十一',
                    icon: 'https://picsum.photos/30/30?timestamp=9',
                    isAvatar: true,
                    avatarRight: false,
                }
            ]
        }
    ]);

// chat 列表
const messageChatList = ref<Chat[]>([
    {
        title: "网站开发05班",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 1,
        sessionId: "1"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 2,
        sessionId: "2"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 20,
        sessionId: "3"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 200,
        sessionId: "4"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 200,
        sessionId: "5"
    },
    {
        title: "网站开发05班",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 1,
        sessionId: "6"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 2,
        sessionId: "7"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 20,
        sessionId: "8"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 200,
        sessionId: "14"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 2,
        sessionId: "9"
    },
    {
        title: "网站开发推荐课程",
        avatar: userAvatar(),
        content: "根据你提供的课程数据，我可以为你推荐以下与网站开发相关的",
        time: 0,
        newMessageSize: 20,
        sessionId: "30"
    }
])
const messageChatHistoryList = ref<ChatHistoryData[]>([{
    role: ChatRoleTypes.System,
    userId: '',
    content: '这里是系统消息，例如：系统通知，班级通知等消息都会以该方式显示在，聊天面板中。这里是系统消息，例如：系统通知，班级通知等消息都会以该方式显示在，聊天面板中。',
    time: 0
},
{
    role: ChatRoleTypes.Self,
    userName: '测试用户',
    bubbleName: 'saibopengke',
    permission: Permission.Tourists,
    userId: '',
    content: '你好',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    userName: '测试用户2',
    permission: Permission.Exit,
    bubbleName: 'qiaokeli',
    userId: '',
    content: '你好，我是智能客服AI小云，你可以问我任何问题，比如：\n1. 如何注册账号？\n2. 如何修改密码？\n3. 如何重置密码？\n4. 如何注销账号？\n5. 如何删除账号？\n6. 如何修改个人信息？\n7. 如何修改头像？\n8. 如何修改昵称？',
    time: 0
},
{
    role: ChatRoleTypes.Self,
    userName: 'AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云',
    permission: Permission.Administrators,
    bubbleName: 'qiaokeli',
    userId: '',
    content: '你好，我是智能客服AI小云，你可以问我任何问题，比如：\n1. 如何注册账号？\n2. 如何修改密码？\n3. 如何重置密码？\n4. 如何注销账号？\n5. 如何删除账号？\n6. 如何修改个人信息？\n7. 如何修改头像？\n8. 如何修改昵称？',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    userName: 'AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云',
    permission: Permission.Teachers,
    userId: '',
    content: '你好，我是智能客服AI小云，你可以问我任何问题，比如：\n1. 如何注册账号？\n2. 如何修改密码？\n3. 如何重置密码？\n4. 如何注销账号？\n5. 如何删除账号？\n6. 如何修改个人信息？\n7. 如何修改头像？\n8. 如何修改昵称？',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    permission: Permission.Teachers,
    userName: 'AI小云',
    bubbleName: 'qiaokeli',
    userId: '',
    content: '测试消息',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    permission: Permission.Teachers,
    userName: 'AI小云',
    bubbleName: 'qiaokeli',
    userId: '',
    content: '',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    userName: '测试用户2',
    permission: Permission.Exit,
    bubbleName: 'saibopengke',
    userId: '',
    content: '你好，我是智能客服AI小云，你可以问我任何问题，比如：\n1. 如何注册账号？\n2. 如何修改密码？\n3. 如何重置密码？\n4. 如何注销账号？\n5. 如何删除账号？\n6. 如何修改个人信息？\n7. 如何修改头像？\n8. 如何修改昵称？',
    time: 0
},
{
    role: ChatRoleTypes.Self,
    userName: 'AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云AI小云',
    permission: Permission.Administrators,
    bubbleName: 'saibopengke',
    userId: '',
    content: '你好，我是智能客服AI小云，你可以问我任何问题，比如：\n1. 如何注册账号？\n2. 如何修改密码？\n3. 如何重置密码？\n4. 如何注销账号？\n5. 如何删除账号？\n6. 如何修改个人信息？\n7. 如何修改头像？\n8. 如何修改昵称？',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    permission: Permission.Teachers,
    userName: 'AI小云',
    bubbleName: 'saibopengke',
    userId: '',
    content: '测试消息',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    permission: Permission.Teachers,
    userName: 'AI小云',
    bubbleName: 'saibopengke',
    userId: '',
    content: '',
    time: 0
},
{
    role: ChatRoleTypes.System,
    userId: '',
    content: '这里是系统消息',
    time: 0
},
{
    role: ChatRoleTypes.Self,
    userName: 'AI小云',
    userId: '',
    content: '你好，我是智能客服AI小云，你可以问我任何问题，比如：\n1. 如何注册账号？\n2. 如何修改密码？\n3. 如何重置密码？\n4. 如何注销账号？\n5. 如何删除账号？\n6. 如何修改个人信息？\n7. 如何修改头像？\n8. 如何修改昵称？',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    permission: Permission.Teachers,
    userId: '',
    bubbleName: 'saibopengke',
    content: '你好，我是智能客服AI小云，你可以问我任何问题，比如：\n1. 如何注册账号？\n2. 如何修改密码？\n3. 如何重置密码？\n4. 如何注销账号？\n5. 如何删除账号？\n6. 如何修改个人信息？\n7. 如何修改头像？\n8. 如何修改昵称？',
    time: 0
},
{
    role: ChatRoleTypes.Self,
    permission: Permission.Administrators,
    userId: '',
    bubbleName: 'saibopengke',
    content: '你好，我是智能客服AI小云，你可以问我任何问题，比如：\n1. 如何注册账号？\n2. 如何修改密码？\n3. 如何重置密码？\n4. 如何注销账号？\n5. 如何删除账号？\n6. 如何修改个人信息？\n7. 如何修改头像？\n8. 如何修改昵称？',
    time: 0
},
{
    role: ChatRoleTypes.Others,
    permission: Permission.Teachers,
    userId: '',
    bubbleName: 'qiaokeli',
    content: '在编程的道路上，你敲下的每一行代码都是未来的基石，遇到的每个错误都是成长的契机。记住，那些最优秀的开发者也曾为简单的bug通宵达旦，被复杂的算法难倒无数次。但正是这些挑战塑造了他们的思维，磨砺了他们的技艺。今天你耐心调试的每一处报错，反复推敲的每一个逻辑，都在悄然积累着突破的力量。当未来的你回望这段坚持的岁月，终会明白：没有白费的努力，只有正在孵化的成功。让AI小云陪伴你的每个攻坚时刻，把挫折转化为智慧，让代码不仅改变机器，更改变你自己的未来！'
},
{
    role: ChatRoleTypes.Self,
    permission: Permission.Administrators,
    userId: '',
    bubbleName: 'qiaokeli',
    content: '代码的世界没有边界，每一个bug都是通往精通的阶梯——今天你解决的难题，终将成为明日你闪耀的勋章！'
},
{
    role: ChatRoleTypes.Others,
    permission: Permission.Teachers,
    userId: '',
    content: '学习是经验，其他一切都只是信息。。',
    time: 0
},
{
    role: ChatRoleTypes.Self,
    permission: Permission.Administrators,
    userId: '',
    content: '科技的本质，是让人类的生活更简单。',
    time: 0
}
]);

// 进入页面时，加载 AI 界面
onMounted(() => {
    aiAssistantClick(); // 进入AI界面
});

</script>


<style src="@/assets/icons/iconfont.css" scoped></style>
<style scoped>
.chataBox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* 导航栏 */
.navigation {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* 聊天列表标题内容 */
.navigation .title {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(65, 185, 255, 0.1), rgba(65, 185, 255, 0.05));
    color: #41B9FF;
    text-shadow: 0 0 10px rgba(65, 185, 255, .3);
    border-radius: 10px;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.navigation .title .iconfont {
    font-size: 42px;
    margin-right: 10px;
    animation: float 3s ease-in-out infinite;
}

.navigation .title .titleText {
    font-size: 20px;
    letter-spacing: 5px;
    font-weight: bold;
    font-family: "artisticFonts";
    opacity: 0.9;
}

.views {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    transition: all 0.3s ease;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* 添加响应式设计 */
@media screen and (max-width: 768px) {
    .navigation .title .titleText {
        font-size: 16px;
        letter-spacing: 3px;
    }

    .navigation .title .iconfont {
        font-size: 36px;
    }
}

/* 添加暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .chataBox {
        background: linear-gradient(135deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .1));
    }

    .navigation {
        background: rgba(0, 0, 0, 0.2);
    }

    .views {
        background: linear-gradient(135deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .1));
    }
}

/* AI 主页 */
.views .aiHome {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.views .aiHome .titleText {
    width: 100%;
    font-size: 28px;
    color: rgba(65, 185, 255, 1);
    font-weight: bold;
    font-family: "artisticFonts";
    display: flex;
    align-items: center;
    justify-content: center;

}
.views .aiHome .titleText .iconfont {
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.views .aiHome .subtitleText {
    width: 100%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.views .aiHome .button {
    margin-top: 50px;
    font-size: 16px;
    gap: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(65, 185, 255, 0.86);
    transition: all 0.3s;
}
.views .aiHome .button .iconfont {
    font-size: 20px;
}
.views .aiHome .button:hover {
    background-color: rgba(65, 185, 255, .8);
}
.views .aiHome .button:active {
    transition: all 0.1s;
    background-color: rgba(65, 185, 255, 1);
}
</style>